import {
  ProTableColumn,
  ProTableInst,
  ProTableQueryItem
} from '@/components/pro-table/type'
import { NButton, NInput, NSpace } from 'naive-ui'

export const useBasicProTable = () => {
  const proTableInst = ref<ProTableInst | null>(null)
  const query: ProTableQueryItem[] = [
    {
      type: 'input',
      title: '普通输入框',
      key: 'query1'
    },
    {
      type: 'select',
      title: '选择框',
      key: 'query2',
      dictOptions: [
        {
          value: '100',
          label: '花花'
        },
        {
          value: '200',
          label: '啦啦'
        }
      ]
    },
    {
      type: 'cascader',
      title: '级联选择框',
      key: 'query3',
      dictOptions: [
        {
          value: 100,
          label: '花花',
          children: [
            {
              value: 101,
              label: '欢欢'
            }
          ]
        },
        {
          value: 200,
          label: '啦啦',
          children: [
            {
              value: 201,
              label: '跳跳'
            }
          ]
        }
      ]
    },
    {
      type: 'date',
      title: '日期选择框',
      key: 'query4'
    },
    {
      type: 'year',
      title: '年份选择框',
      key: 'query5'
    },
    {
      type: 'daterange',
      title: 'xxx',
      key: ['startTime', 'endTime']
    },
    {
      type: 'custom',
      title: '自定义输入框',
      key: '',
      render() {
        return <NInput />
      }
    }
  ]
  const columns: ProTableColumn[] = [
    {
      type: 'index',
      title: '序号',
      width: 70
    },
    {
      title: '普通列',
      key: 'key1'
    },
    {
      title: '自定义列属性',
      key: 'key2',
      props: {
        style: {
          color: 'red'
        }
      },
      click(row) {
        window['$message'].success(row['key2'])
      }
    },
    {
      type: 'link',
      title: '链接列',
      key: 'key3',
      click(row) {
        window.open(row['key3'], '_blank')
      }
    },
    {
      type: 'dict',
      title: '字典列',
      key: 'key4',
      dictOptions: [
        {
          value: 100,
          label: '花花',
          props: {
            onclick() {}
          }
        },
        {
          value: 200,
          label: '啦啦'
        }
      ]
    },

    {
      type: 'tag',
      title: '标签列',
      key: 'key5',

      dictOptions: [
        {
          value: 100,
          label: '小明',
          type: 'primary'
        },
        {
          value: 200,
          label: '小红',
          type: 'warning'
        }
      ]
    },
    {
      type: 'switch',
      title: '开关列',
      key: 'key6',
      props: {
        onUpdateValue(val) {
          console.log(val)
        }
      },
      checkedText: '已启用',
      uncheckedText: '已禁用'
    },
    {
      type: 'date',
      title: '日期列',
      key: 'key7',
      format: 'YYYY-MM-DD HH:mm'
    },
    {
      title: '操作',
      width: 200,
      render() {
        return (
          <>
            <NSpace justify="center">
              <NButton text type="primary">
                详情
              </NButton>
              <NButton text type="error">
                删除
              </NButton>
            </NSpace>
          </>
        )
      }
    }
  ]

  return {
    proTableInst,
    query,
    columns
  }
}
